<!-- <template>
  <div class="coding-problems">
    <header>
      <h1>编程题库</h1>
      <button @click="goBack" class="back-button">返回</button>
    </header>
    <main>
      <div class="problem-list">
        <div
          v-for="problem in problems"
          :key="problem.id"
          class="problem-item"
          @click="goToProblem(problem.id)"
        >
          <h3>{{ problem.title }}</h3>
          <p>难度: {{ problem.difficulty }}</p>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const problems = ref([
  {
    id: 201,
    title: '两数之和',
    difficulty: '简单',
    description:
      '给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。'
  },
  {
    id: 202,
    title: '最长回文子串',
    difficulty: '中等',
    description: '给你一个字符串 s，找到 s 中最长的回文子串。'
  },
  {
    id: 203,
    title: '接雨水',
    difficulty: '困难',
    description:
      '给定 n 个非负整数表示每个宽度为 1 的柱子的高度图，计算按此排列的柱子，下雨之后能接多少雨水。'
  }
])

const goBack = () => {
  router.push('/')
}

const goToProblem = (problemId) => {
  router.push(`/coding-problem/${problemId}`)
}
</script> -->

<template>
  <div class="coding-problems">
    <header>
      <h1>编程题库</h1>
      <button @click="goBack" class="back-button">返回</button>
    </header>
    <main>
      <div class="problem-list">
        <div
          v-for="problem in problems"
          :key="problem.id"
          class="problem-item"
          @click="goToProblem(problem.id)"
        >
          <h3>{{ problem.title }}</h3>
          <p>难度: {{ problem.difficulty }}</p>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
// import { useProblemStore } from '../stores/problemStore'
import { useProblemStore } from '@/stores/modules/problemStore'
import { storeToRefs } from 'pinia'

const router = useRouter()
const problemStore = useProblemStore()
const { problems } = storeToRefs(problemStore)

const goBack = () => {
  router.push('/')
}

const goToProblem = (problemId) => {
  problemStore.setCurrentProblem(problemId)
  router.push(`/coding-problem/${problemId}`)
}
</script>

<style scoped>
.coding-problems {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333;
  background-color: #ffffff;
}

header {
  background-color: #1e90ff;
  color: white;
  padding: 20px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  margin-bottom: 20px;
}

h1,
h2,
h3 {
  margin: 0;
}

.back-button {
  background-color: white;
  color: #1e90ff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: #f0f0f0;
}

.problem-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.problem-item {
  background-color: #f0f8ff;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.problem-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 10px;
  }

  .back-button {
    width: 100%;
  }

  .problem-list {
    grid-template-columns: 1fr;
  }
}
</style>
